<template>
  <div class="priority-demo">
    <h2 class="section-title">CSS 样式优先级详解</h2>
    <p class="section-intro">
      CSS优先级决定了当多个规则应用到同一个元素时，哪个规则会生效。理解优先级计算是CSS的核心技能。
    </p>

    <div class="priority-calculator">
      <h3>优先级计算器</h3>
      <div class="calculator-grid">
        <div class="weight-item">
          <label>内联样式 (style属性)</label>
          <input v-model.number="weights.inline" type="number" min="0" max="10" />
          <span class="weight-value">× 1000 = {{ weights.inline * 1000 }}</span>
        </div>
        <div class="weight-item">
          <label>ID选择器 (#id)</label>
          <input v-model.number="weights.id" type="number" min="0" max="10" />
          <span class="weight-value">× 100 = {{ weights.id * 100 }}</span>
        </div>
        <div class="weight-item">
          <label>类/属性/伪类选择器</label>
          <input v-model.number="weights.class" type="number" min="0" max="10" />
          <span class="weight-value">× 10 = {{ weights.class * 10 }}</span>
        </div>
        <div class="weight-item">
          <label>元素选择器</label>
          <input v-model.number="weights.element" type="number" min="0" max="10" />
          <span class="weight-value">× 1 = {{ weights.element * 1 }}</span>
        </div>
        <div class="total-weight">
          <strong>总权重: {{ totalWeight }}</strong>
        </div>
      </div>
    </div>

    <div class="demo-grid">
      <!-- 基础优先级 -->
      <div class="demo-card">
        <h3>基础优先级规则</h3>
        <div class="code-example">
          <div class="code-block">
            <pre><code>/* 权重: 0,0,0,1 */
p { color: black; }

/* 权重: 0,0,1,0 */
.text { color: blue; }

/* 权重: 0,1,0,0 */
#special { color: red; }

/* 权重: 1,0,0,0 */
style="color: green"</code></pre>
          </div>
          <div class="demo-result">
            <p class="priority-text" id="priority-special">这段文字展示了优先级的作用</p>
            <p class="explanation">
              最终颜色: <span class="final-color">红色</span> (ID选择器权重最高)
            </p>
          </div>
        </div>
      </div>

      <!-- 复杂选择器权重 -->
      <div class="demo-card">
        <h3>复杂选择器权重计算</h3>
        <div class="code-example">
          <div class="code-block">
            <pre><code>/* 权重: 0,0,1,1 */
div.container { background: lightblue; }

/* 权重: 0,1,1,1 */
div#main.container { background: lightgreen; }

/* 权重: 0,0,2,2 */
.header .nav.active { background: lightyellow; }

/* 权重: 0,1,0,2 */
#sidebar ul li { background: lightpink; }</code></pre>
          </div>
          <div class="demo-result">
            <div class="container" id="main">
              <div class="weight-demo">权重: 0,1,1,1 (绿色背景)</div>
            </div>
            <div class="header">
              <div class="nav active">权重: 0,0,2,2 (黄色背景)</div>
            </div>
            <div id="sidebar">
              <ul>
                <li>权重: 0,1,0,2 (粉色背景)</li>
              </ul>
            </div>
          </div>
        </div>
      </div>

      <!-- !important 规则 -->
      <div class="demo-card">
        <h3>!important 规则</h3>
        <div class="code-example">
          <div class="code-block">
            <pre><code>/* 普通规则 */
.normal { color: blue; }

/* !important 规则 */
.important { color: red !important; }

/* 即使权重更高，也会被 !important 覆盖 */
#high-weight.important { color: green; }

/* 只有更高权重的 !important 能覆盖 */
#higher.important { color: purple !important; }</code></pre>
          </div>
          <div class="demo-result">
            <p class="normal important" id="high-weight">这段文字演示 !important 的作用</p>
            <p class="important" id="higher">这段文字被更高权重的 !important 覆盖</p>
            <div class="important-warning">⚠️ 避免过度使用 !important，它会使CSS难以维护</div>
          </div>
        </div>
      </div>

      <!-- 继承与层叠 -->
      <div class="demo-card">
        <h3>继承与层叠</h3>
        <div class="code-example">
          <div class="code-block">
            <pre><code>/* 父元素样式 */
.parent {
  color: blue;
  font-size: 16px;
  border: 1px solid red; /* 不会被继承 */
}

/* 子元素会继承部分样式 */
.child {
  /* color: blue; 继承自父元素 */
  /* font-size: 16px; 继承自父元素 */
  /* border: 不会继承 */
}

/* 显式继承 */
.explicit-inherit {
  border: inherit; /* 显式继承父元素的border */
}</code></pre>
          </div>
          <div class="demo-result">
            <div class="parent-demo">
              <p>父元素文字 (蓝色, 16px)</p>
              <div class="child-demo">子元素文字 (继承蓝色和字体大小)</div>
              <div class="explicit-inherit">显式继承边框的子元素</div>
            </div>
          </div>
        </div>
      </div>

      <!-- 层叠顺序 -->
      <div class="demo-card">
        <h3>层叠顺序 (Cascade Order)</h3>
        <div class="code-example">
          <div class="code-block">
            <pre><code>/* 1. 用户代理样式 (浏览器默认) */
/* 2. 用户样式 */
/* 3. 作者样式 (我们写的CSS) */
/* 4. 作者 !important */
/* 5. 用户 !important */
/* 6. 用户代理 !important */

/* 相同权重时，后定义的覆盖先定义的 */
.cascade-demo { color: red; }
.cascade-demo { color: blue; } /* 这个会生效 */</code></pre>
          </div>
          <div class="demo-result">
            <div class="cascade-order">
              <div class="cascade-demo">层叠顺序演示 (蓝色)</div>
              <div class="cascade-explanation">
                <strong>层叠顺序优先级:</strong>
                <ol>
                  <li>用户代理 !important</li>
                  <li>用户 !important</li>
                  <li>作者 !important</li>
                  <li>内联样式</li>
                  <li>作者样式</li>
                  <li>用户样式</li>
                  <li>用户代理样式</li>
                </ol>
              </div>
            </div>
          </div>
        </div>
      </div>

      <!-- 实用技巧 -->
      <div class="demo-card">
        <h3>优先级实用技巧</h3>
        <div class="code-example">
          <div class="code-block">
            <pre><code>/* 技巧1: 重复类名提高权重 */
.btn.btn { background: blue; } /* 权重: 0,0,2,0 */

/* 技巧2: 使用 :where() 降低权重 */
:where(.reset) { margin: 0; } /* 权重: 0,0,0,0 */

/* 技巧3: 使用 :is() 保持权重 */
:is(.warning, .error) { color: red; }

/* 技巧4: 属性选择器替代类选择器 */
[class~="btn"] { padding: 8px; }</code></pre>
          </div>
          <div class="demo-result">
            <button class="btn btn-double">重复类名按钮</button>
            <div class="reset">:where() 重置的元素</div>
            <div class="warning">:is() 警告样式</div>
            <button class="btn">属性选择器按钮</button>
          </div>
        </div>
      </div>
    </div>

    <div class="priority-tips">
      <h3>优先级最佳实践</h3>
      <div class="tips-grid">
        <div class="tip-card">
          <h4>🎯 避免使用 !important</h4>
          <p>除非绝对必要，否则不要使用 !important。它会破坏CSS的自然层叠。</p>
        </div>
        <div class="tip-card">
          <h4>📏 保持选择器简洁</h4>
          <p>避免过于复杂的选择器，保持权重在合理范围内。</p>
        </div>
        <div class="tip-card">
          <h4>🏗️ 使用CSS架构</h4>
          <p>采用BEM、OOCSS等方法论来管理CSS优先级。</p>
        </div>
        <div class="tip-card">
          <h4>🔧 利用现代伪类</h4>
          <p>使用 :where()、:is() 等现代伪类来精确控制权重。</p>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, computed } from 'vue'

const weights = ref({
  inline: 0,
  id: 1,
  class: 1,
  element: 1,
})

const totalWeight = computed(() => {
  return (
    weights.value.inline * 1000 +
    weights.value.id * 100 +
    weights.value.class * 10 +
    weights.value.element * 1
  )
})
</script>

<style scoped lang="scss">
.priority-demo {
  .section-title {
    font-size: 2rem;
    color: #333;
    margin-bottom: 1rem;
    border-bottom: 3px solid #ff9800;
    padding-bottom: 0.5rem;
  }

  .section-intro {
    font-size: 1.1rem;
    color: #666;
    margin-bottom: 2rem;
    line-height: 1.6;
  }

  .priority-calculator {
    background: #fff3e0;
    border-radius: 8px;
    padding: 1.5rem;
    margin-bottom: 2rem;
    border-left: 4px solid #ff9800;

    h3 {
      margin: 0 0 1rem 0;
      color: #f57c00;
    }

    .calculator-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
      gap: 1rem;
      align-items: center;
    }

    .weight-item {
      display: flex;
      flex-direction: column;
      gap: 0.5rem;

      label {
        font-weight: 500;
        color: #333;
      }

      input {
        padding: 8px;
        border: 1px solid #ddd;
        border-radius: 4px;
        width: 80px;
      }

      .weight-value {
        font-size: 0.9rem;
        color: #666;
      }
    }

    .total-weight {
      grid-column: 1 / -1;
      text-align: center;
      padding: 1rem;
      background: #ff9800;
      color: white;
      border-radius: 6px;
      font-size: 1.2rem;
    }
  }

  .demo-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(500px, 1fr));
    gap: 2rem;
    margin-bottom: 2rem;
  }

  .demo-card {
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    padding: 1.5rem;
    background: #fafafa;

    h3 {
      margin: 0 0 1rem 0;
      color: #ff9800;
      font-size: 1.3rem;
    }

    .code-example {
      display: flex;
      flex-direction: column;
      gap: 1rem;
    }

    .code-block {
      background: #2d3748;
      border-radius: 6px;
      padding: 1rem;
      overflow-x: auto;

      pre {
        margin: 0;
        color: #e2e8f0;
        font-family: 'Fira Code', monospace;
        font-size: 0.9rem;
        line-height: 1.4;
      }
    }

    .demo-result {
      background: white;
      border: 1px solid #e0e0e0;
      border-radius: 6px;
      padding: 1rem;
      min-height: 100px;
    }
  }

  .priority-tips {
    .tips-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
      gap: 1rem;
    }

    .tip-card {
      background: #f3e5f5;
      border-radius: 8px;
      padding: 1.5rem;
      border-left: 4px solid #9c27b0;

      h4 {
        margin: 0 0 0.5rem 0;
        color: #7b1fa2;
        font-size: 1.1rem;
      }

      p {
        margin: 0;
        color: #666;
        line-height: 1.5;
      }
    }
  }
}

// 演示样式
.priority-text {
  color: black;
  font-size: 16px;
  margin-bottom: 0.5rem;
}

.text {
  color: blue;
}

#priority-special {
  color: red;
}

.final-color {
  color: red;
  font-weight: bold;
}

.container {
  background: lightblue;
  padding: 1rem;
  margin: 0.5rem 0;
  border-radius: 4px;
}

#main.container {
  background: lightgreen;
}

.header .nav.active {
  background: lightyellow;
  padding: 0.5rem;
  margin: 0.5rem 0;
  border-radius: 4px;
}

#sidebar ul li {
  background: lightpink;
  padding: 0.5rem;
  margin: 0.5rem 0;
  border-radius: 4px;
  list-style: none;
}

.normal {
  color: blue;
}

.important {
  color: red !important;
}

#high-weight.important {
  color: green;
}

#higher.important {
  color: purple !important;
}

.important-warning {
  background: #fff3cd;
  border: 1px solid #ffeaa7;
  border-radius: 4px;
  padding: 0.5rem;
  margin-top: 0.5rem;
  color: #856404;
}

.parent-demo {
  color: blue;
  font-size: 16px;
  border: 1px solid red;
  padding: 1rem;
  border-radius: 4px;

  .child-demo {
    margin: 0.5rem 0;
    padding: 0.5rem;
    background: #f5f5f5;
    border-radius: 4px;
  }

  .explicit-inherit {
    border: inherit;
    padding: 0.5rem;
    margin: 0.5rem 0;
    background: #e3f2fd;
    border-radius: 4px;
  }
}

.cascade-demo {
  color: red;
  color: blue;
  padding: 0.5rem;
  background: #f5f5f5;
  border-radius: 4px;
  margin-bottom: 1rem;
}

.cascade-explanation {
  ol {
    margin: 0.5rem 0;
    padding-left: 1.5rem;

    li {
      margin-bottom: 0.25rem;
      font-size: 0.9rem;
    }
  }
}

.btn {
  padding: 8px 16px;
  border: 1px solid #ccc;
  border-radius: 4px;
  background: white;
  cursor: pointer;
  margin-right: 8px;
}

.btn.btn {
  background: blue;
  color: white;
  border-color: blue;
}

:where(.reset) {
  margin: 0;
  padding: 0.5rem;
  background: #e8f5e8;
  border-radius: 4px;
  margin-bottom: 0.5rem;
}

:is(.warning, .error) {
  color: red;
  padding: 0.5rem;
  background: #ffebee;
  border-radius: 4px;
  margin: 0.5rem 0;
}

[class~='btn'] {
  padding: 8px;
}
</style>
